<script>
import {defineComponent} from 'vue'
import actApi from "@/utils/api/actApi";
import authPage from "@/utils/pages/authPage";
import QuestionItem from "@/views/act/components/QuestionItem.vue";
import UserAvatarName from "@/components/UserAvatarName.vue";
import DBConst from "@/consts/DBConst";

export default defineComponent({
  name: "ApplyQ",
  components: {UserAvatarName, QuestionItem},
  created() {
    this.init()
  },
  data(){
    return {
      q: null,
      records: []
    }
  },
  methods: {
    async init(){
      let {actId, qId} = this.$route.query
      if(actId && qId){
        let {q, records} = await actApi.listApplyQ(actId, qId)
        this.records = records
        this.q = q
      }else {
        authPage.status(-3).open().replace()
      }
      
    },
  }
})
</script>

<template>
  <div style="margin: 10px" v-if="q===null">
    <van-skeleton title avatar :row="3" />
  </div>
  
  <div v-else class="apply-q-container-div">
    
    <div class="apply-q-div">
      <QuestionItem
        :q="q"
        show
        />
    </div>
    
    <div v-for="(item,index) in records">
      <div class="user-record-item-div">
        <UserAvatarName
          :user="item.user"
          />
        <div class="record-ans-div">
          {{item.ans}}
        </div>
      </div>
      <div class="separator-line"/>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "@/assets/style/less/all.less";
.apply-q-container-div {
  display: flex;
  flex-direction: column;
  padding: 3px 14px;
  
  >.apply-q-div{
    border: 1px solid cornflowerblue;
    border-radius: 5px;
    padding: 3px;
    margin: 4px 0;
  }
}

.user-record-item-div {
  display: flex;
  flex-direction: column;
  padding: 5px;
  >.record-ans-div{
    font-size: 14px;
    color: #9E9E9E;
    margin-left: 10px;
  }
}
</style>